import React, { Component } from "react";
import {View,Text,StyleSheet,Animated,Easing,Dimensions} from "react-native";
import PropTypes from 'prop-types';

const width = Dimensions.get('window').width;

export default class ProgressBar extends Component{
  constructor(props) {
    super(props);
    this.state={
      progress: new Animated.Value(0)
    }
  }

  static PropTypes={
    progress:PropTypes.number,
    width:PropTypes.number,
    backgroundStyle:PropTypes.object
  }

  static defaultProps={
    progress:0,
    width:width
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
      this.update();
    }
  }

  update() {
    Animated.timing(this.state.progress, {
      easing: Easing.inOut(Easing.ease),
      duration:500,
      toValue: this.props.progress
    }).start();
  }

  render() {
    let fillWidth = this.state.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0 * this.props.width, 1 * this.props.width],
    });
    return (
      <View style={[styles.background,this.props.backgroundStyle, this.props.style]}>
        <Animated.View style={[styles.fill, { width: fillWidth }]}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: '#bbbbbb',
    height: 3,
    overflow: 'hidden'
  },
  fill: {
    backgroundColor: '#F2CA78',
    height: 3
  }
});

